﻿/// <reference path = "Base.ts" />
namespace VantCellTypes {

    interface SliderCellTypeParam {
        DefaultValue: any;
        min: string;
        max: string;
        step: string;
        barHeight: number;
        buttonSize: number;
        activeColor: string;
        inactiveColor: string;
        vertical: boolean;
        range: boolean;
        reverse: boolean;
        IsDisabled: boolean;
        ReadOnly: boolean;
    }

    export class SliderCellType extends VantCellTypeBase<SliderCellTypeParam> {
        public onPageLoaded(info: Forguncy.Plugin.CellTypeInfo) {
            const { min: Min, max: Max } = Math;
            const self = this;
            const cellType = this.cellType;
            this.getContainer().css("overflow", "");
            const option = {
                el: "#" + this.uId,
                template: `
<div class="fgc-vant-slider" :style="{ padding: buttonSize / 2 + 'px' }">
    <van-slider
        v-model="value"
        :min="min"
        :max="max"
        :step="step"
        :bar-height="barHeight"
        :button-size="buttonSize"
        :active-color="activeColor"
        :inactive-color="inactiveColor"
        :range="range"
        :reverse="reverse"
        :disabled="disabled"
        :readonly="readonly"
        :vertical="vertical"
        @change="handleChange"
    >
    </van-slider>
</div>
`,
                data() {
                    let min = self.calcNumber(cellType.min) || 0;
                    let max = self.calcNumber(cellType.max);
                    max = max === 0 ? 0 : (max || 100);
                    if (min > max) {
                        [min, max] = [0, 100];
                    }
                    return {
                        value: undefined,
                        min,
                        max,
                        step: self.calcNumber(cellType.step),
                        barHeight: cellType.barHeight,
                        buttonSize: cellType.buttonSize,
                        activeColor: Forguncy.ConvertToCssColor(cellType.activeColor),
                        inactiveColor: Forguncy.ConvertToCssColor(cellType.inactiveColor),
                        range: !!cellType.range,
                        reverse: !!cellType.reverse,
                        vertical: !!cellType.vertical,
                        readonly: false,
                        disabled: false
                    };
                },
                methods: {
                    getValue() {
                        if (Array.isArray(this.value)) {
                            const values = this.value.map(item => {
                                return Min(Max(Number(item), this.min), this.max);
                            });
                            return values.join(",");
                        }
                        return Min(Max(Number(this.value), this.min), this.max);
                    },
                    setValue(value: any) {
                        if (self.isEmpty(value)) {
                            this.value = this.range ? [this.min, this.max] : this.min;
                        }
                        else if (typeof value === "number") {
                            this.value = Min(Max(value, this.min), this.max);
                        } else if (typeof value === "string") {
                            if (this.range) {
                                if (value.indexOf(",") !== -1) {
                                    this.value = value.split(",").map(i => Min(Max(Number(i), this.min), this.max));
                                } else {
                                    this.value = [this.min, this.max];
                                }
                            } else {
                                this.value = Min(Max(Number(value), this.min), this.max);
                            }
                        }
                    },
                    setReadOnly(value: boolean) {
                        this.readonly = value;
                    },
                    disable() {
                        this.disabled = true;
                    },
                    enable() {
                        this.disabled = false;
                    },
                    handleChange() {
                        self.commitValue();
                    }
                }
            };

            this.createVueApp(option);
            
            this.onDependenceCellValueChanged(() => {
                const { min, max, step } = this.cellType;
                this.vue.min = this.calcNumber(min);
                this.vue.max = this.calcNumber(max);
                this.vue.step = this.calcNumber(step);
            });

            super.onPageLoaded(info);
        }
    }
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Vant.CellTypes.Slider, Vant", VantCellTypes.SliderCellType);